<template>
	<view class="container">
		<view class="swiper square">
			<swiper class="skeleton-rect" indicator-dots="true"
				:autoplay="true" :circular="circular" :interval="interval" :duration="duration"
				indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" :current="swiperCur"
				@change="swiperChange" style="height: 400rpx;">
				<block v-for="(item,index) in imgUrls" :key="index">
					<swiper-item class="" :class="{active:index == swiperCur}">
						<view style="height: 400rpx;" @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
							<image :src="item" class="slide-image">
							</image>
						</view>
					</swiper-item>
				</block>
		
			</swiper>
		</view><!-- 轮播图 end -->
		<view class="info_container">
			<view class="intro_bg">
				<view class="ib_left">
					<view class="name">{{data.name}}</view>
					<view class="stop">不可退款</view>
				</view>
				<view class="ib_right">
					<view class="price">
						¥{{data.price}}元
					</view>
				</view>
			</view><!-- intro_bg end-->
			<!-- 购买须知 -->
			<view class="know">
				<view class="title">购买须知</view>
				<view class="content">
					<parser :html="know" ref="article" :tag-style="tagStyle"></parser>
				</view>
			</view>
			<!-- 购买须知 end -->
			<!-- 购买须知 -->
			<view class="know">
				<view class="title">详细介绍</view>
				<view class="content">
					<parser :html="content" ref="article" :tag-style="tagStyle"></parser>
				</view>
			</view>
			<!-- 购买须知 end -->
		</view><!--info-->
		<view class="footer">
			<view class="price">¥{{data.price}}元</view>
			<view class="buy" @click="goBuy()">立即购买</view>
		</view>
	</view>
</template>

<script>
	import {toLogin} from "@/libs/login.js";
	import {mapGetters} from "vuex";
	import {getProductDetail} from "@/api/product.js";
	import parser from "@/components/jyf-parser/jyf-parser";
	
	// #ifdef MP
	import authorize from "@/components/Authorize";
	// #endif
	export default {
		components: {
			parser,
			// #ifdef MP
			authorize,
			// #endif
		},
		data() {
			return {
				showSkeleton: true, //骨架屏显示隐藏
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 4000,
				duration: 500,
				imgUrls: [
					
				], //图片轮播数据
				data:{
					name:'',
					price:0.00
				},
				know:'',
				content:'',
				tagStyle: {
					img: "width:100%;display:block;",
					table: "width:100%",
					video: "width:100%;height:100%;",
				},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				id:0
			}
		},
		computed: mapGetters(["isLogin"]),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV == true) {
						console.info(111)
						// this.getCouponList();
						// this.getCartCount();
						// this.downloadFilePromotionCode();
					}
				},
				deep: true,
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData();
		},
		methods: {
			getData(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				getProductDetail(this.id).then((res) => {
					let data = res.data;
					that.data = data;
					that.imgUrls = data.imgs.split(',');
					that.know = data.know;
					that.content = data.content;
					uni.hideLoading();
				});
			},
			goBuy(){
				if (this.isLogin === false) {
					toLogin();
				} else {
					console.info('已登录')
					this.goCat(true);
				}
			},
			goCat(){
				uni.navigateTo({
					url:'/pages/news/order/confirm?id='+this.id
				})
			},
			swiperChange(e){
				
			},
			goDetail(item){
				
			},
			gotoDetail(){
				uni.navigateTo({
					url:'../detail/index'
				})
			}
		}
	}
</script>

<style lang="scss" scope>
	.container {
		background-color: #F5F5F5;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.swiper{
		padding: 0 0;
		.slide-image{
			width: 100%; 
			height: 400rpx;
		}
	}
	
	.info_container{
		display: flex;
		flex-direction: column;
		background-color: white;
		padding-bottom: 100rpx;
		// margin-bottom: calc(100rpx+ constant(safe-area-inset-bottom));
		// margin-bottom: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		// margin-bottom: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		// padding: 20rpx;
		
		.intro_bg{
			display: flex;
			flex-direction: row;
			justify-content: space-between;	
			padding: 30rpx;
			
			.ib_left{
				display: flex;
				flex-direction: column;
				.name{
					font-size: 36rpx;
					color: black;
				}
				.stop{
					color: orange;
					font-size: 26rpx;
				}
			}
			.ib_right{
				color: red;
				font-size: 28rpx;
			}
		}
		.know{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			border-top: 10rpx solid #f3f3f3;
			.title{
				font-size: 30rpx;
				font-weight: bold;
				color: black;
			}
			.content{
				margin-top: 40rpx;
				color: black;
			}
		}
	}
	.footer {
		padding: 0 20rpx 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		height: 100rpx;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.price{
			color: red;
			font-size: 30rpx;
			font-weight: bold;
			height: 100rpx;
			line-height: 100rpx;
		}
		.buy{
			margin-top: 20rpx;
			width: 200rpx;
			height: 60rpx;
			border-radius: 30rpx;
			background-color: red;
			color: white;
			font-size: 28rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}
</style>
